<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #66CCFF;
        }
        /* 通配符清楚默认样式 */
        * {
            margin: 0;
            padding: 0;
            font-weight: normal;
            text-decoration: none;
            list-style: none;
        }

        .list {
            /* 父相子绝 */
            position: relative;
            top: 50%;
            
            left: 50%;
            /* 使得ul居中显示 */
            transform: translateX(-50%);
            /* flex布局使得图片横向排列 */
            display: flex;
            width: 960px;
            height: 540px;
            /* background-color: thistle; */
            /* 溢出隐藏 */
            overflow: hidden;
            border-radius: 10px;
        }

        .list li {
            /* 绝对定位让图片全部叠在ul里面 */
            position: absolute;
            width: 960px;
            height: 540px;
            /* 设置动画名称 时间 循环次数 匀速 */
            animation: move 13s infinite linear;

        }

        @keyframes move {
            /* 0的时候显示第五张 */
            0% {
                transform: translateX(0px);

            }
            11% {
                transform: translateX(960px);

            }

/* 设置同样的值让图片停留一会 */
            22% {
                transform: translateX(960px);
            }

            44% {
                transform: translateX(1920px);

            }

            55% {
                transform: translateX(1920px);
            }

            66% {
                transform: translateX(2880px);

            }

            77% {
                transform: translateX(2880px);
            }

            88% {
                transform: translateX(3870px);

            }

            100% {
                transform: translateX(3870px);
            }
        }
       
/* 高级选择器调整每张图片的位置 */
        .list li:nth-child(1) {
            background: url("https://img0.baidu.com/it/u=316779398,3122752064&fm=253&fmt=auto&app=138&f=JPG?w=889&h=500")no-repeat center/cover;
            /* calc（）是计算符，比较方便，不用进行过多计算 */
            left: calc(-960px*4);


        }

        .list li:nth-child(2) {
            background: url("https://img0.baidu.com/it/u=3801189566,3263886989&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")no-repeat center/cover;
            left: calc(-960px*3);

        }

        .list li:nth-child(3) {
            background: url("https://img2.baidu.com/it/u=2258598068,25205447&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")no-repeat center/cover;
            left: calc(-960px*2);

        }

        .list li:nth-child(4) {
            background: url("https://img0.baidu.com/it/u=3411162793,694935196&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")no-repeat center/cover;
            left: calc(-960px*1);
        }

        .list li:nth-child(5) {
            background: url("https://img0.baidu.com/it/u=701079675,2918487592&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")no-repeat center/cover;
            left: 0;
        }
    </style>
</head>

<body>
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>